<!--
 * @Author: hupaocai 13767071930@163.com
 * @Date: 2025-03-26 09:44:28
 * @LastEditors: hupaocai 13767071930@163.com
 * @LastEditTime: 2025-03-29 11:35:16
 * @FilePath: /banban/pages/login/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="bind-nfc-page" :style="`padding-top: ${statusBarHeight}px`">
        <PageHeader>
            <template #left>
                <view class="back" @tap="goBack"> <uni-icons type="left" color="#1e232c" size="18px"/> </view>
            </template>
        </PageHeader>

        <view class="nfc-container">
            <view class="use-nfc-title">绑定NFC</view>
            <view class="use-nfc-img">
                <view class="circle small"></view>
                <view class="circle mid"></view>
                <view class="circle large"></view>
            </view>
            <view class="use-nfc-tip">靠近手机即可完成绑定</view>
        </view>
      
    </view>
</template>
<script setup name="BindNFC">
import { bindNfc } from '@/api/user'
import PageHeader from '@/components/page-header'
import { onShow } from '@dcloudio/uni-app'
import nfc from '@/utils/nfc'
import { toast } from '@/utils/common'
import { ref, computed } from 'vue'
import store from '@/store/index.js';
const statusBarHeight = computed(() => store.state.systemInfo.statusBarHeight)

const nfcIds = ref([])
const readData = async () => {
    const nfcId = await nfc.listenNFCStatus();
    nfcIds.value = [...nfcIds.value, nfcId]
    toast({ icon: 'none', title: '识别成功：' + nfcId })
    // 本地存储
    uni.setStorageSync('nfcId', nfcId)

    verifyNFCInfo()
}

// NFC登录
const verifyNFCInfo = async () => {

    const [nfcId] = nfcIds.value
    // 判定当前NFC是否已经绑定过用户和手机号
    // const noBind = 1
    try {
        const { code } = await bindNfc({ nfcId })
        if (code === 0) {
            toast({ icon: 'success', title: '绑定成功' }, () => {
                goBack()
            })
        } else {
            readData()
        }
    } catch (e) {

    }
}


const goBack = () => {
    uni.navigateBack()
}

onShow(() => {
    readData()
})

</script>
<style lang="scss">
	.bind-nfc-page {
        height: 100vh;
        box-sizing: border-box;
        background: linear-gradient(-135deg, #FAEEE7 0, #F3ACB7 100%);
        background: url('@/static/image/login/login-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-family: HarmonyOS Sans SC;
        overflow: auto;

        .back {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60rpx;
            height: 60rpx;
            border-radius: 10rpx;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(232, 236, 244, 1);
        }


        .nfc-container {
            margin: 184rpx auto 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            .use-nfc-title {
                height: 48rpx;
                line-height: 48rpx;
                font-size:48rpx;
                font-weight: 400;
                letter-spacing: 1px;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                vertical-align: top;
            }

            .use-nfc-tip {
                height: 71px;
                font-size: 32rpx;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 48rpx;
                color: rgba(166, 166, 166, 1);
                text-align: center;
                vertical-align: top;
            }

            .use-nfc-img {
                position: relative;
                margin-top: 91px;
                margin-bottom: 91px;
                width: 240rpx;
                height: 240rpx;
                background: url('@/static/image/login/nfc.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;

                .circle {
                    position: absolute;
                    width: 240rpx;
                    height: 240rpx;
                    border-radius: 50%;
                    border: 1px solid rgba(115, 115, 255, 1);
                    transform-origin: center center;
                    &.small {
                        transform: scale(1.2);
                        border-color: rgba(115, 115, 255, 1);
                        animation: pulse 1s infinite ease-in-out;
                    }

                    &.mid {
                        transform: scale(1.5);
                        border-color: rgba(115, 115, 255, 1);
                        animation: pulse 1s infinite ease-in-out  0.66s;;
                    }

                    &.large {
                        transform: scale(1.8);
                        border-color: rgba(115, 115, 255, 1);
                        animation: pulse 1s infinite ease-in-out 1.32s;
                    }
                }
            }
        }
	}

    @keyframes pulse {
        0% {
            opacity: 0.5;
            border-width: 1px;
        }
        50% {
            opacity: 1;
            border-width: 2px;
        }
        100% {
            opacity: 0.5;
            border-width: 1px;
        }
    }
</style>